<!--资料区-->
<style>
  .pagination {
    margin: 0!important;
  }
</style>
<div id="material-box">
  <ul class="media-list">
    <div v-if="materials.length<=0" class="empty">暂无资料</div>
    <mater-li v-for="mater in materials" :mater="mater" :key="mater.id"></mater-li>
  </ul>
  <div v-if="page.totalPages>1" class="text-center">
    <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
  </div>
</div>
<template id="mater-li">
  <li class="media">
    <div class="media-body">
      <div class="mbs">
        <a :href="mater.path" target="_top">
          {{mater.filename}}
          <span class="glyphicon glyphicon-save" title="下载"></span>
        </a>
      </div>
      <div class="text-sm">
        <span class="color-gray">{{mater.size}}MB</span>
        <span class="bullet">•</span>
        <span class="link-primary">{{mater.task==null?'默认教学计划':mater.task.name}}</span>
        <span class="bullet">•</span>
        <span class="color-gray">上传于{{mater.time.substr(0,10)}}</span>
      </div>
    </div>
  </li>
</template>
<script>
  var maBoxVm = new Vue({
    el: '#material-box',
    data: {
      materials: [],
      page: {
        pageNum: 1,
        totalPages: 1,
        limit: 10
      }
    },
    components: {
      'mater-li': {
        props:['mater'],
        template: '#mater-li'
      }
    },
    methods: {
      gotoPage: function (page) {
        this.page.pageNum = page;
        this.getMaterials();
      },
      getMaterials: function () {
        var self = this;
        $.post('/course/material/api/${kid}/page', {type:0, page:self.page.pageNum}, function (data) {
          if (data.success) {
            self.materials = data.payload.rows;
            self.page.limit = data.payload.limit;
            self.page.pageNum = data.payload.pageNum;
            self.page.totalPages = data.payload.totalPages;
          }
        });
      }
    },
    created: function () {
      this.getMaterials();
    }
  })
</script>